/**
 * React 的 children Prop
 *    就是类似Vue中玩 slot 插槽的操作
 *
 *    1. 组件开始标签与闭合标签中编写的内容会作为该组件的 children 属性获取到
 *
 *
 *    要实现默认内容如何玩？
 *      设置 prop 的默认值即可
 *    要实现具名插槽如何玩？
 *      不能使用 children ，可以直接传递更多的属性过来即可
 *    插槽作用域？
 *    作用域插槽？
 *      <slot a="1" b="2" />
 *
 *      传递一个 render 函数的 prop 给子组件
 *      【render 函数 就是返回一个 React元素的函数】
 *
 *
 *
 */

import React from "react";

function Modal(props) {
  return (
    <div>
      <div className="header">{props.header}</div>
      <div className="body">{props.children}</div>
      <div className="footer">{props.footer}</div>
    </div>
  );
}

function Card(props) {
  console.log("Card", props);
  return (
    <div>
      <p>Card</p>
      {props.children}
    </div>
  );
}

function Avatar({ children = <button>默认按钮</button> }) {
  return (
    <div>
      <h1>Avatar</h1>
      {children}
    </div>
  );
}

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>App</h1>

        <Card>
          <h1>插槽内容</h1>
        </Card>

        <hr />

        <Avatar />

        <Avatar>
          <button>点我</button>
        </Avatar>

        <Modal header={<button>头部</button>} footer={<button>底部</button>}>
          <p>内容</p>
        </Modal>
      </div>
    );
  }
}

export default App;
